<template>
  <div class="classification">
    <van-sticky>
      <div class="top">
        <div
          class="iconfont icon-arrowRight-copy-copy"
          @click="$router.go(-1)"
        ></div>
        <div class="shopp">菜谱分类</div>
        <div
          class="iconfont icon-sousuo"
          @click="$router.push('/Search/search')"
        ></div>
      </div>
    </van-sticky>

    <div class="contain">
      <div class="nav">
        <div class="item" v-for="(item, index) in flatcatalogs" :key="index">
          <div
            :class="['items', Index == index ? 'active' : '']"
            @click="getIndex(index)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>

      <div class="cards" v-if="Index == 0 || Index == 5 || Index == 10">
        <!-- <div class="tab-card" v-for="value in flatcatalogs[Index].cs" :key="value.id">
            {{ value.name }}
          </div> -->
        <div class="img">
          <img src="../../assets/11.png" alt="" />
        </div>
        <div
          class="tab-card"
          v-for="value in values1"
          :key="value.id"
          @click="getname(value.name)"
        >
          {{ value.name }}
        </div>
        <div class="img">
          <img src="../../assets/22.png" alt="" />
        </div>
        <div
          class="tab-card"
          v-for="value in values2"
          :key="value.id"
          @click="getname(value.name)"
        >
          {{ value.name }}
        </div>
        <div class="img">
          <img src="../../assets/33.png" alt="" />
        </div>
        <div
          class="tab-card"
          v-for="value in values3"
          :key="value.id"
          @click="getname(value.name)"
        >
          {{ value.name }}
        </div>
      </div>
      <div class="cards" v-if="Index == 1 || Index == 6">
        <!-- <div class="tab-card" v-for="value in flatcatalogs[Index].cs" :key="value.id">
            {{ value.name }}
          </div> -->
        <div class="img">
          <img src="../../assets/44.png" alt="" />
        </div>
        <div
          class="tab-card"
          v-for="value in values4"
          :key="value.id"
          @click="getname(value.name)"
        >
          {{ value.name }}
        </div>
        <div class="img">
          <img src="../../assets/55.png" alt="" />
        </div>
        <div
          class="tab-card"
          v-for="value in values5"
          :key="value.id"
          @click="getname(value.name)"
        >
          {{ value.name }}
        </div>
        <div class="img">
          <img src="../../assets/66.png" alt="" />
        </div>
        <div
          class="tab-card"
          v-for="value in values6"
          :key="value.id"
          @click="getname(value.name)"
        >
          {{ value.name }}
        </div>
      </div>
      <div class="cards" v-if="Index == 2 || Index == 7">
        <div class="img">
          <img src="../../assets/77.png" alt="" />
        </div>
        <div
          class="tab-card"
          v-for="value in values77"
          :key="value.id"
          @click="getname(value.name)"
        >
          {{ value.name }}
        </div>
        <div class="img">
          <img src="../../assets/88.png" alt="" />
        </div>
        <div
          class="tab-card"
          v-for="value in values88"
          :key="value.id"
          @click="getname(value.name)"
        >
          {{ value.name }}
        </div>
        <div class="img">
          <img src="../../assets/99.png" alt="" />
        </div>
        <div
          class="tab-card"
          v-for="value in values99"
          :key="value.id"
          @click="getname(value.name)"
        >
          {{ value.name }}
        </div>
        <div class="img">
          <img src="../../assets/00.png" alt="" />
        </div>
        <div
          class="tab-card"
          v-for="value in values00"
          :key="value.id"
          @click="getname(value.name)"
        >
          {{ value.name }}
        </div>
        <div class="img">
          <img src="../../assets/01.png" alt="" />
        </div>
        <div
          class="tab-card"
          v-for="value in values01"
          :key="value.id"
          @click="getname(value.name)"
        >
          {{ value.name }}
        </div>
      </div>
      <div class="cards" v-if="Index == 3 || Index == 8">
        <div class="img">
          <img src="../../assets/02.png" alt="" />
        </div>
        <div
          class="tab-card"
          v-for="value in values02"
          :key="value.id"
          @click="getname(value.name)"
        >
          {{ value.name }}
        </div>
        <div class="img">
          <img src="../../assets/03.png" alt="" />
        </div>
        <div
          class="tab-card"
          v-for="value in values03"
          :key="value.id"
          @click="getname(value.name)"
        >
          {{ value.name }}
        </div>
        <div class="img">
          <img src="../../assets/04.png" alt="" />
        </div>
        <div
          class="tab-card"
          v-for="value in values04"
          :key="value.id"
          @click="getname(value.name)"
        >
          {{ value.name }}
        </div>
      </div>
      <div class="cards" v-if="Index == 4 || Index == 9">
        <div class="img">
          <img src="../../assets/05.png" alt="" />
        </div>
        <div
          class="tab-card"
          v-for="value in values05"
          :key="value.id"
          @click="getname(value.name)"
        >
          {{ value.name }}
        </div>
        <div class="img">
          <img src="../../assets/06.png" alt="" />
        </div>
        <div
          class="tab-card"
          v-for="value in values06"
          :key="value.id"
          @click="getname(value.name)"
        >
          {{ value.name }}
        </div>
        <div class="img">
          <img src="../../assets/07.png" alt="" />
        </div>
        <div
          class="tab-card"
          v-for="value in values07"
          :key="value.id"
          @click="getname(value.name)"
        >
          {{ value.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getflatcatalogs } from "../../api/search";
export default {
  data() {
    return {
      Index: 0,
      flatcatalogs: null,
      values1: [
        {
          name: "红烧肉",
        },
        {
          name: "可乐鸡翅",
        },
        {
          name: "糖醋排骨",
        },
        {
          name: "鱼香肉丝",
        },
        {
          name: "红烧排骨",
        },
        {
          name: "宫保鸡丁",
        },
        {
          name: "西红柿炒鸡蛋",
        },
        {
          name: "清蒸鲈鱼",
        },
        {
          name: "酸菜鱼",
        },
      ],
      values2: [
        {
          name: "油焖大虾",
        },
        {
          name: "麻婆豆腐",
        },
        {
          name: "家常菜",
        },
        {
          name: "水煮肉片",
        },
        {
          name: "凉拌黄瓜",
        },
        {
          name: "下饭菜",
        },
        {
          name: "糖醋里脊",
        },
        {
          name: "回锅肉",
        },

        {
          name: "红烧茄子",
        },
      ],
      values3: [
        {
          name: "麻辣香锅",
        },
        {
          name: "黄焖鸡",
        },
        {
          name: "地三鲜",
        },
        {
          name: "豆腐",
        },
        {
          name: "麻辣小龙虾",
        },
        {
          name: "酸辣土豆丝",
        },
        {
          name: "京酱肉丝",
        },
        {
          name: "烤鸡翅",
        },

        {
          name: "土豆泥",
        },
      ],
      values4: [
        {
          name: "下饭菜",
        },
        {
          name: "快手菜",
        },
        {
          name: "凉菜",
        },
        {
          name: "素食",
        },
        {
          name: "宴客菜",
        },
        {
          name: "私房菜",
        },
        {
          name: "下酒菜",
        },
        {
          name: "下午茶",
        },
        {
          name: "野炊 ",
        },
      ],
      values5: [
        {
          name: "川菜",
        },
        {
          name: "粤菜",
        },
        {
          name: "湘菜",
        },
        {
          name: "东北菜",
        },
        {
          name: "浙菜",
        },
        {
          name: "鲁菜",
        },
        {
          name: "淮扬菜",
        },
        {
          name: "徽菜",
        },

        {
          name: "苏菜",
        },
        {
          name: "闽菜",
        },
        {
          name: "云南菜",
        },
        {
          name: "潮州菜",
        },
      ],
      values6: [
        {
          name: "日本料理",
        },
        {
          name: "韩国料理",
        },
        {
          name: "泰国菜",
        },
        {
          name: "意大利菜",
        },
        {
          name: "法国料理",
        },
        {
          name: "东南亚菜",
        },
        {
          name: "西班牙菜",
        },
        {
          name: "德国菜",
        },

        {
          name: "墨西哥菜",
        },
      ],
      values77: [
        {
          name: "排骨",
        },
        {
          name: "五花肉",
        },
        {
          name: "瘦肉",
        },
        {
          name: "猪蹄",
        },
        {
          name: "猪肝",
        },
        {
          name: "腊肉",
        },
        {
          name: "里脊",
        },
        {
          name: "猪肚",
        },

        {
          name: "肥肠",
        },
      ],
      values88: [
        {
          name: "鸡胸肉",
        },
        {
          name: "鸡腿",
        },
        {
          name: "鸡翅",
        },
        {
          name: "鸡爪",
        },
        {
          name: "鸡肣",
        },
        {
          name: "三黄鸡",
        },
        {
          name: "土鸡",
        },
        {
          name: "乌鸡",
        },

        {
          name: "柴鸡",
        },
      ],
      values99: [
        {
          name: "牛排",
        },
        {
          name: "牛腩",
        },
        {
          name: "肥牛",
        },
        {
          name: "牛里脊",
        },
        {
          name: "牛里脊",
        },
        {
          name: "牛腱",
        },
        {
          name: "牛仔骨",
        },
        {
          name: "牛肋骨",
        },

        {
          name: "百叶",
        },
      ],
      values00: [
        {
          name: "羊肉",
        },
        {
          name: "羊排",
        },
        {
          name: "羊蝎子",
        },
        {
          name: "羊肝",
        },
        {
          name: "羊肚",
        },
        {
          name: "羊骨",
        },
        {
          name: "羊后腿",
        },
        {
          name: "羊后腿",
        },

        {
          name: "羊里脊",
        },
      ],
      values01: [
        {
          name: "鸭肉",
        },
        {
          name: "鸽子",
        },
        {
          name: "牛蛙",
        },
        {
          name: "兔肉",
        },
        {
          name: "鹅肉",
        },
        {
          name: "鹅肉",
        },
        {
          name: "鹤鹑",
        },
        {
          name: "鹤鹑",
        },

        {
          name: "马肉",
        },
      ],
      values02: [
        {
          name: "茄子",
        },
        {
          name: "土豆",
        },
        {
          name: "菠菜",
        },
        {
          name: "韭菜",
        },
        {
          name: "西红柿",
        },
        {
          name: "油菜",
        },
        {
          name: "紫菜",
        },
        {
          name: "春笋",
        },

        {
          name: "香椿",
        },
      ],
      values03: [
        {
          name: "西兰花",
        },
        {
          name: "生菜",
        },
        {
          name: "莴笋",
        },
        {
          name: "空心菜",
        },
        {
          name: "筒蒿",
        },
        {
          name: "茴香",
        },
        {
          name: "鸡毛菜",
        },
        {
          name: "菜苔",
        },

        {
          name: "芥菜",
        },
      ],
      values04: [
        {
          name: "金针菇",
        },
        {
          name: "木耳",
        },
        {
          name: "平菇",
        },
        {
          name: "猴头菇",
        },
        {
          name: "牛肝菌",
        },
        {
          name: "白灵菇",
        },
        {
          name: "滑子菇",
        },
        {
          name: "黄蘑",
        },

        {
          name: "松茸",
        },
      ],
      values05: [
        {
          name: "面条",
        },
        {
          name: "凉面",
        },
        {
          name: "包子",
        },
        {
          name: "饺子",
        },
        {
          name: "拌面",
        },
        {
          name: "馒头",
        },
        {
          name: "焖面",
        },
        {
          name: "花卷",
        },

        {
          name: "煎饺",
        },
      ],
      values06: [
        {
          name: "手抓饼",
        },
        {
          name: "煎饼",
        },
        {
          name: "葱油饼",
        },
        {
          name: "馅饼",
        },
        {
          name: "玉米饼",
        },
        {
          name: "炒饼",
        },
        {
          name: "肉夹馍",
        },
        {
          name: "发面饼",
        },

        {
          name: "春卷",
        },
      ],
      values07: [
        {
          name: "牛排",
        },
        {
          name: "三明治",
        },
        {
          name: "披萨",
        },
        {
          name: "土豆泥",
        },

        {
          name: "意大利面",
        },
        {
          name: "汉堡",
        },
      ],
    };
  },

  methods: {
    getIndex(index) {
      console.log(index);
      this.Index = index;
    },
    getname(name) {
      this.$router.push({
        path: "/Search/searchlist",
        query: { key: name },
      });
    },
    getflatcatalogsFun() {
      getflatcatalogs().then((data) => {
        this.flatcatalogs = data.result.cs;
        console.log(this.flatcatalogs);
        console.log(this.flatcatalogs[0].cs);
      });
    },
  },
  created() {
    this.getflatcatalogsFun();
  },
};
</script>

<style lang="less">
.classification {
  .top {
    background: #fff;
    padding-bottom: 5px;
    padding: 0 20px;
    padding-top: 30px;
    padding-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    .iconfont {
      font-size: 20px;
      font-weight: bold;
    }
  }
  .contain {
    display: flex;
    .nav {
      .item {
        // overflow-y: scroll;
      }
      .items {
        background: #fafafa;
        width: 95px;
        text-align: center;
        height: 45px;
        line-height: 45px;
      }
      .active {
        font-weight: bold;
        position: relative;
        background: #fff;
      }
      .active::after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 35%;
        right: 0;
        width: 3px;
        height: 15px;
        background: #f7be26;
      }
    }
    .cards {
     overflow-y: scroll;
    height: 590px;
    width: 255px;
      margin: 0 12px;
      text-align: center;
      .img {
        margin-top: 15px;
        img {
          height: 56px;
          border-radius: 8px;
        }
      }
      .tab-card {
        display: inline-block;
        // width: 76px;
        // height: 32px;
        // line-height: 32px;
        padding: 10px 8px;
        text-align: center;
        border: 1px solid #c6c6c6;
        margin-right: 7px;
        margin-top: 8px;
        border-radius: 5px;
      }
    }
  }
}
</style>